---
layout: raw
---

<!--
  Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->

<html><body><style type="text/css">
body {
  padding: 0;
  margin: 0;
  font: bold 11px/14px "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow: hidden;
}
.github-btn {
  height: 20px;
  overflow: hidden;
}
.gh-btn,
.gh-count,
.gh-ico {
  float: left;
}
.gh-btn,
.gh-count {
  padding: 2px 5px 2px 4px;
  color: #333;
  text-decoration: none;
  text-shadow: 0 1px 0 #fff;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 3px;
}
.gh-btn {
  background-color: #e6e6e6;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#eaeaea));
  background-image: -webkit-linear-gradient(#fafafa, #eaeaea);
  background-image: -moz-linear-gradient(top, #fafafa, #eaeaea);
  background-image: -ms-linear-gradient(#fafafa, #eaeaea);
  background-image: -o-linear-gradient(#fafafa, #eaeaea);
  background-image: linear-gradient(#fafafa, #eaeaea);
  background-repeat: no-repeat;
  border: 1px solid #d4d4d4;
  border-bottom-color: #bcbcbc;
}
.gh-btn:hover,
.gh-btn:focus,
.gh-btn:active {
  color: #fff;
  text-decoration: none;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  border-color: #518cc6 #518cc6 #2a65a0;
  background-color: #3072b3;
}
.gh-btn:hover,
.gh-btn:focus {
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3));
  background-image: -webkit-linear-gradient(#599bdc, #3072b3);
  background-image: -moz-linear-gradient(top, #599bdc, #3072b3);
  background-image: -ms-linear-gradient(#599bdc, #3072b3);
  background-image: -o-linear-gradient(#599bdc, #3072b3);
  background-image: linear-gradient(#599bdc, #3072b3);
}
.gh-btn:active {
  background-image: none;
  -webkit-box-shadow: inset 0 2px 5px rgba(0,0,0,.10);
  -moz-box-shadow: inset 0 2px 5px rgba(0,0,0,.10);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.10);
}
.gh-ico {
  width: 14px;
  height: 14px;
  margin-right: 4px;
  vertical-align: 3px;
  background-image: url();
  background-size: 28px 14px;
  background-repeat: no-repeat;
  background-position: 0 0;
}
.gh-btn:hover .gh-ico,
.gh-btn:focus .gh-ico,
.gh-btn:active .gh-ico {
  background-position: -14px 0;
}
.gh-count {
  position: relative;
  display: none; /* hidden to start */
  margin-left: 4px;
  background-color: #fafafa;
  border: 1px solid #d4d4d4;
}
.gh-count:hover,
.gh-count:focus {
  color: #4183C4;
}
.gh-count:before,
.gh-count:after {
  content: '';
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.gh-count:before {
  top: 50%;
  left: -3px;
  margin-top: -4px;
  border-width: 4px 4px 4px 0;
  border-right-color: #fafafa;
}
.gh-count:after {
  top: 50%;
  left: -4px;
  z-index: -1;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #d4d4d4;
}
.github-btn-large {
  height: 30px;
}
.github-btn-large .gh-btn,
.github-btn-large .gh-count {
  padding: 3px 10px 3px 8px;
  font-size: 16px;
  line-height: 22px;
  border-radius: 4px;
}
.github-btn-large .gh-ico {
  width: 20px;
  height: 20px;
  background-size: 40px 20px;
}
.github-btn-large .gh-btn:hover .gh-ico,
.github-btn-large .gh-btn:focus .gh-ico,
.github-btn-large .gh-btn:active .gh-ico {
  background-position: -20px 0;
}
.github-btn-large .gh-count {
  margin-left: 6px;
}
.github-btn-large .gh-count:before {
  left: -5px;
  margin-top: -6px;
  border-width: 6px 6px 6px 0;
}
.github-btn-large .gh-count:after {
  left: -6px;
  margin-top: -7px;
  border-width: 7px 7px 7px 0;
}
</style>
<span class="github-btn" id="github-btn">
  <a class="gh-btn" id="gh-btn" href="#" target="_blank">
    <span class="gh-ico"></span>
    <span class="gh-text" id="gh-text"></span>
  </a>
  <a class="gh-count" id="gh-count" href="#" target="_blank"></a>
</span>
<script>
  // Read a page's GET URL variables and return them as an associative array.
  // Source: http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html
  var params = function () {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++) {
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }
    return vars;
  }()
  var user = params.user,
  repo = params.repo,
  type = params.type,
  count = params.count,
  size = params.size,
  head = document.getElementsByTagName('head')[0],
  button = document.getElementById('gh-btn'),
  mainButton = document.getElementById('github-btn'),
  text = document.getElementById('gh-text'),
  counter = document.getElementById('gh-count');


  // Add commas to numbers
  function addCommas(n) {
    return String(n).replace(/(\d)(?=(\d{3})+$)/g, '$1,')
  }

  function jsonp(path) {
    var el = document.createElement('script');
    el.src = path + '?callback=callback';
    head.insertBefore(el, head.firstChild);
  }

  function callback(obj) {
    if (type == 'watch') {
      counter.innerHTML = addCommas(obj.data.watchers);
    } else if (type == 'fork') {
      counter.innerHTML = addCommas(obj.data.forks);
    } else if (type == 'follow') {
      counter.innerHTML = addCommas(obj.data.followers);
    }

    // Show the count if asked
    if (count == 'true') {
      counter.style.display = 'block';
    }
  }

  // Set href to be URL for repo
  button.href = 'https://github.com/' + user + '/' + repo + '/';

  // Add the class, change the text label, set count link href
  if (type == 'watch') {
    mainButton.className += ' github-watchers';
    text.innerHTML = 'Star';
    counter.href = 'https://github.com/' + user + '/' + repo + '/stargazers';
  } else if (type == 'fork') {
    mainButton.className += ' github-forks';
    text.innerHTML = 'Fork';
    counter.href = 'https://github.com/' + user + '/' + repo + '/network';
  } else if (type == 'follow') {
    mainButton.className += ' github-me';
    text.innerHTML = 'Follow @' + user;
    button.href = 'https://github.com/' + user;
    counter.href = 'https://github.com/' + user + '/followers';
  }

  // Change the size
  if (size == 'large') {
    mainButton.className += ' github-btn-large';
  }

  if (type == 'follow') {
    jsonp('https://api.github.com/users/' + user);
  } else {
    jsonp('https://api.github.com/repos/' + user + '/' + repo);
  }
</script></body></html>
